<template>
    <view class="apply-content">
        <view class="apply-card">
            <image :src="state.applyImg || getImgOssUrl('/ui-prod-2.8.0/header-default@2x.png')"></image>
        </view>
        <view class="apply-detail">
            <view class="apply-title"> 请完成以下条件加入{{ dtbname }} </view>
            <view class="apply-tips">
                <view class="apply-space">
                    <view class="apply-phone">
                        <image :src="getImgOssUrl('/ui-prod-2.8.0/mobile.png')" class="apply-image"></image>
                        <view class="apply-text">手机号登录</view>
                    </view>

                    <view>
                        <button class="btn-all btn-disabled" v-if="state.islogin">已登录</button>
                        <button class="btn-all btn-allow" v-else @click="toLogin">请登录</button>
                    </view>
                </view>
                <view class="apply-space" v-if="state.param?.type">
                    <view class="apply-phone">
                        <image :src="getImgOssUrl('/ui-prod-2.8.0/money.png')" class="apply-image"></image>
                        <view class="apply-col">
                            <template v-if="state.param?.type == 'amount'">
                                <view class="apply-text">累计购买金额达{{ state.param.total / 100 }}元</view>
                                <view class="apply-jindu">
                                    当前进度：<text class="apply-current"
                                        >￥{{ currency(state.param.complate).divide(100) }}</text
                                    >
                                    /￥{{ currency(state.param.total).divide(100) }}
                                </view>
                            </template>
                            <template v-if="state.param?.type == 'num'">
                                <view class="apply-text">累计购买{{ state.param.total }}次</view>
                                <view class="apply-jindu">
                                    当前进度：<text class="apply-current">{{ state.param.complate }}</text
                                    >/{{ state.param.total }}
                                </view>
                            </template>
                        </view>
                    </view>
                    <view>
                        <button class="btn-all btn-allow" v-if="state.param.isComplete == 1">待完成</button>
                        <button class="btn-all btn-disabled" v-else>已完成</button>
                    </view>
                </view>
                <view class="agreement">
                    <checkbox class="checkbox" color="#FE292B" :checked="agreementChecked" @click="changeHandler" />
                    <view class="agreement-content">
                        <text>我已阅读并同意</text>
                        <text class="agreement-text" @click="openPopup">《加入须知》</text>
                    </view>
                </view>
                <view>
                    <button class="apply-add" @click="checkAgreementChecked">立即加入</button>
                </view>
            </view>
        </view>
        <uni-popup ref="weChatPopup" :mask-click="true">
            <view class="wechat-code-view">
                <text class="wechat-code-view-title">加入须知</text>
                <text class="wechat-code-view-img">{{ state.applyRemark || '商家暂未填写内容' }}</text>
                <uni-icons @tap="closePopup" class="popup-close" type="close" size="80rpx" color="#fff"></uni-icons>
            </view>
        </uni-popup>
    </view>
</template>
<script setup>
import { ref, reactive, watch, inject } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import router from '@/router';
import request from '@/request';
import storage from '@/commons/storage';
import store from '@/store';
import { getParamsBySceneHook } from '@/hooks';
import { checkToken, getImgOssUrl } from '@/commons/utils';

const currency = inject('currency');
const onSetNav = title => uni.setNavigationBarTitle({ title });
const paramsStore = store.useParamsStore();

const weChatPopup = ref();
const agreementChecked = ref(false);
const props = defineProps({
    scene: {
        type: String,
        default: ''
    },
    i: {
        type: [Number, String],
        default: 0
    },
    s: {
        type: [Number, String],
        default: 0
    },
    ch: {
        type: [Number, String],
        default: 0
    }
});
const dtbname = ref(storage.get('dtbName') || '');
const state = reactive({
    applyName: '', //申请名称
    applyImg: '', //申请图片
    applyRemark: '', //加入须知
    applyCondition: [],
    param: {},
    islogin: false,
    i: '',
    s: '',
    c: 2
});
const openPopup = () => {
    weChatPopup?.value?.open('center');
};

const closePopup = () => {
    weChatPopup?.value?.close();
};
const changeHandler = () => {
    agreementChecked.value = !agreementChecked.value;
};
onShow(async () => {
    let scene = props.scene || paramsStore.scene;
    if (scene) {
        const res = await getParamsBySceneHook(scene);
        state.i = res.i;
        state.s = res.s;
        state.s && storage.set('ZW_SHOP_ID', Number(state.s));
    }
    props.s && storage.set('ZW_SHOP_ID', Number(props.s));
    if (await checkToken()) {
        state.islogin = true;
    }
    let userId = storage.get('userId') || 0;
    request('applyInfo', { userId }).then(res => {
        Object.assign(state, res.data);
        onSetNav(state.applyName || '申请' + (dtbname.value || '分销员'));
        state.param = res.data.applyCondition[1];
    });
});
const checkAgreementChecked = () => {
    // 暂时注释，不要误删
    let data = state.applyCondition.filter(item => item.isComplete == 1);

    if (data.length || !state.islogin) {
        uni.showToast({
            title: '请完成上述条件~',
            icon: 'none'
        });
        return;
    }
    if (!agreementChecked.value) {
        uni.showToast({
            title: '请同意协议并勾选~',
            icon: 'none'
        });
    } else {
        let param;
        if (state.i || props.i) {
            param = { type: 'distributor', invite_uid: state.i || props.i };
        } else {
            param = { type: 'distributor' };
        }
        request('apply', param).then(res => {
            router.redirectTo({ url: '/pages-user/distributi/distributiApply/distributiStatus' });
        });
    }
};
const toLogin = () => {
    paramsStore.scene = props.scene;
    router.push('/pages-user/login/index');
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
